<template>
  <div v-if="!task" class="text-center text-gray-500">
    <p>No task selected</p>
  </div>
  <div v-else class="p-4">
    <input
      v-model="task.title"
      placeholder="Please enter task title"
      class="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
    />
  </div>
</template>
<script lang="ts" setup>
import type { ITask } from '@/api/task.api'

const task = defineModel('task', {
  type: Object as () => ITask | null,
  default: null,
})
</script>
